<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-input
          v-model="ser.employee_name"
          placeholder="请输入员工名称"
        ></el-input>
      </el-col>
      <el-col :span="4" style="text-align: center">
        <el-date-picker
          v-model="ser.year_month"
          type="month"
          placeholder="选择月"
          value-format="yyyy-M"
          style="width: 98%"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="4" style="text-align: center">
        <el-input
          v-model="ser.card_number"
          disabled
          placeholder="请读取卡片信息"
        >
          <el-button
            @click="getkas"
            slot="append"
            icon="el-icon-plus"
            style="background: #1890ff; color: #fff"
            >读卡</el-button
          >
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-button
          @click="company_name_click(0)"
          icon="el-icon-search"
          class="add_btn"
        >
          搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          @click="company_name_clicks"
          class="add_btn"
        >
          重置</el-button
        >
        <el-button @click="dayin" class="add_btn"> 打印</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="productList"
      v-loading="loading"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="employee_name" label="员工" width="180">
      </el-table-column>
      <el-table-column label="考勤记录(X:未打卡 ✔:打卡)">
        <template slot-scope="scope">
          <div>
            <table class="kaoqin_table">
              <tr>
                <td>
                  <span>日期</span>
                  <span>上班</span>
                  <span>下班</span>
                </td>
                <td
                  v-for="(item, index) in scope.row.appendance_log"
                  :key="index"
                >
                  <div>{{ item.date }}</div>
                  <div>
                    <span v-if="item.first == 1" :title="item.first_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="item.first == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="item.first == 3" :title="item.first_time">
                      迟到</span
                    >
                    <span v-if="item.first == 4"> 休息</span>
                    <span v-if="item.first == 5"> 请假</span>
                  </div>
                  <div>
                    <span v-if="item.last == 1" :title="item.last_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="item.last == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="item.last == 3" :title="item.last_time">
                      迟到</span
                    >
                    <span v-if="item.last == 4"> 休息</span>
                    <span v-if="item.last == 5"> 请假</span>
                    <span v-if="item.last == 6" :title="item.last_time">
                      早退</span
                    >
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            @click="set_product(scope.row)"
            type="text"
            icon="el-icon-edit"
            >补考勤</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="isbukao"
      width="30%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col>
           考勤时间
        </el-col>
        <el-col>
          <el-date-picker
            v-model="bukao.appendance_time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
           备注
        </el-col>
        <el-col>
          <el-input v-model="bukao.remark" placeholder="请输入备注"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isbukao = false">取 消</el-button>
        <el-button type="primary" @click="subim"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAppendanceLogList } from "@/api/product/index";
export default {
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      isbukao: false,
      loading: true,
      ser: {
        employee_name: "",
        year_month: "",
        card_number: "",
      },

      productList: [],
      bukao:{
        users_id:"",
        appendance_time:'',
        remark:''
      }
    };
  },
  mounted() {
    this.get_AppendanceLogList();
  },
  methods: {
    handleClose(){
      this.bukao={
        users_id:"",
        appendance_time:'',
        remark:''
      }
    },
    set_product(row) {
      this.bukao.users_id =row.
      this.isbukao=true
    },
    subim(){

    },
    dayin() {
      const routerurl = this.$router.resolve({
        name: "kaoqindayin",
        path: "/kaoqindayin",
        query: {
          data: JSON.stringify(this.productList),
        },
      });
      window.open(routerurl.href, "_blank");
    },
    getkas() {
      var that = this;
      that
        .$axios("http://127.0.0.1:9191/getCardId")
        .then(function (response) {
          console.log(response.data);
          if (response.data.state == 0) {
            that.ser.card_number = response.data.cardid;
            that.getlist();
          }
        })
        .catch(function (err) {
          that.$message.error("请下载并启动读卡通讯程序或检查读卡器是否接入~");
          console.log(err);
        });
    },
    get_AppendanceLogList() {
      getAppendanceLogList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.loading = false;
        }
      });
    },
    company_name_click() {
      getAppendanceLogList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    company_name_clicks() {
      this.ser = {
        employee_name: "",
        year_month: "",
        card_number: "",
      };
      getAppendanceLogList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style>
.kaoqin_table {
  width: 100%;
}
.kaoqin_table tr {
  display: flex;
}
.kaoqin_table tr td {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
</style>
